<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 请求</title>
    <link rel="stylesheet" href="/js/index.css">
</head>
<body>
<div id="app">
    <el-button type="danger" @click="search">点击按钮</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>

        <el-table-column
                prop="empName"
                label="姓名"
                width="180">
        </el-table-column>

        <el-table-column
                prop="gender"
                label="性别"
                width="180">
        </el-table-column>

        <el-table-column
                prop="salary"
                label="工资"
                width="180">
        </el-table-column>

        <el-table-column
                prop="deptid"
                label="部门编号"
                width="180">
        </el-table-column>
    </el-table>

    <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageno"
            :page-size="pagesize"
            layout="total, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/index.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            total: 0,
            pagesize: 3,
            pageno: 1
        },
        methods: {
            search: function () {
                vm.fetchData(1)
            },
            handleCurrentChange(currentpage) {
                this.fetchData(currentpage)
            },
            fetchData(currentpage) {
                axios.get("/pageDemo?pageno=" + currentpage)
                .then(function (resp) {
                    vm.tableData = resp.data.list
                    vm.total = resp.data.total
                    vm.pageno = resp.data.pageNum
                })
            }
        }
    })
</script>
</body>
</html>